<%--
  Created by IntelliJ IDEA.
  User: zyxna
  Date: 2020/8/20
  Time: 10:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>


<html>
<head>
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        #fade {    /*遮罩层*/
            display:none;  /* 元素不可见*/
            position:absolute;  /*绝对定位*/
            top:0%;
            left:0%;
            width:100%;
            height:100%;
            background-color:black;
            z-index:1;  /*元素的堆叠顺序*/
            -moz-opacity:0.3;
            opacity:.3;   /*透明度*/
            filter:alpha(opacity=3);
        }
        #light{
            display:none;
            position:absolute;
            width:500px;
            height: 400px;
            top:50%;
            left:50%;
            margin:-220px 0 0 -200px;
            padding:0px;
            background-color:white;
            z-index:2;
            overflow:auto;
            border-radius: 5px;
        }
        #dv1{
            background-color: #3a3a3a;
            height: 60px;
            color: white;
            font-size: 18px;
            line-height: 60px;
        }
        #dv2{
            border-bottom: 1px solid gainsboro;
        }
        #dv3{
            text-align: center;
            padding-top: 7px;
        }
        .addForm{
            padding-top: 30px;
            text-align: center;
            font-size: 100%;
        }
        input,select{height: 40px; width: 270px;font-size: 90%}
        label{display: block;padding: 10px }
        .btn{ height: 35px; width: 70px;border: 0px; font-size: 100%;}
        #OKbt{background-color: #64b8f9; color: white}

    </style>
</head>
<body>


<div id="light">
    <div id="dv1" name="head"><span style="margin-left: 30px">修改员工信息</span></div>

    <form id="order" action="InforPerfectServlet" mothod="post" class="addForm">
        <div id="dv2" name="body" style="padding-bottom: 30px;">
            <label>
                名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字:<input type="text" name="rname" value="${user.rname}">
            </label>

            <label>
                性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:
                <select  >
                    <option value="${user.gender}" name="gender">男</option>
                    <option value="${user.gender} "name="gender">女</option>

                </select>
            </label>
            <label>
                联系方式:&nbsp;<input type="text" id="inp"  name="phoneNumber" value="${user.phoneNumber}">
            </label>
            <label>
                入职时间:&nbsp;<input id="inductionTime" type="date" name="inductionTime" value="${user.inductionTime}"/>
            </label>
            <label>
                居住地址:&nbsp;<input type="text" name="address" value="${user.address}">
            </label>
            <label>
                薪&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;资:&nbsp;&nbsp;<input type="text" name="salary" value="${user.salary}">
            </label>
        </div>
        <div id="dv3" name="foot" >
            <button id="OKbt1"type="button"class="btn" onclick="sendOrder()">提&nbsp;&nbsp;交</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="closebt1" class="btn" >取&nbsp;&nbsp;消</button>
        </div>
    </form>
</div>
<div id="fade"></div>

</body>
</html>
<script type="text/javascript">
    window.onload=function(){
        var linkbt=document.getElementById("openbt");
        var light=document.getElementById('light');
        var fade=document.getElementById('fade');
        var dv1=document.getElementById('dv1');
        var closebt=document.getElementById("closebt");
        var OKbt=document.getElementById('OKbt');

        light.style.display='block';
        fade.style.display='block';

        // closebt.onclick=function(){
        //     light.style.display='none';
        //     fade.style.display='none';
        // }
        // OKbt.onclick=function () {
        //     light.style.display='none';
        //     fade.style.display='none';
        // }
    }

    function sendOrder() {
        //获取表单数据，并序列化
        var formData = $("form").serializeArray();
        //将序列化数据转为对象
        var formObject = {};
        for (var item in formData) {
            formObject[formData[item].name] = formData[item].value;
        }
        //发送JSON到服务器
        $.ajax({
            type: "POST",
            url: "/Supermarket1_war/InforPerfectServlet?method=InfoUpdate&uinfoid=${user.uinfoid}",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data:  formObject,
            datatype: "json",
            success: function (data) {
                window.location.href="InforPerfectServlet?method=InfoFind"
            }
        });
    }
</script>

<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>--%>
<%--<%@ page isELIgnored="false" %>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>信息修改</title>--%>
<%--    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>--%>
<%--    <style>--%>

<%--        div{--%>
<%--            width: 500px;--%>
<%--            height: 500px;--%>
<%--            background-color: #14dacc;--%>
<%--            position: absolute;--%>
<%--            top: 0;--%>
<%--            left: 0;--%>
<%--            right: 0;--%>
<%--            bottom: 0;--%>
<%--            margin: auto;--%>
<%--        }--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body >--%>
<%--<div id="dv" align="cen">--%>
<%--    <form  >--%>

<%--        名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字:&nbsp;&nbsp;<br />--%>
<%--       &nbsp;&nbsp;--%>
<%--        <br />--%>
<%--        &nbsp;<br />--%>
<%--        &nbsp;<br />--%>
<%--        &nbsp;<br />--%>
<%--        &nbsp;&nbsp;<input type="text" name="salary" value="${user.salary}"><br />--%>
<%--        <br /><br /><br /><br />--%>
<%--        <button id="bt" type="button" onclick="sendOrder()">提交</button>--%>
<%--    </form>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>
<%--<script>--%>

<%--    function sendOrder() {--%>
<%--        //获取表单数据，并序列化--%>
<%--        var formData = $("form").serializeArray();--%>
<%--        //将序列化数据转为对象--%>
<%--        var formObject = {};--%>
<%--        for (var item in formData) {--%>
<%--            formObject[formData[item].name] = formData[item].value;--%>
<%--        }--%>
<%--        //发送JSON到服务器--%>
<%--        $.ajax({--%>
<%--            type: "POST",--%>
<%--            url: "/Supermarket_war/InforPerfectServlet?method=InfoUpdate&uinfoid=${user.uinfoid}",--%>
<%--            contentType: "application/x-www-form-urlencoded; charset=utf-8",--%>
<%--            data:  formObject,--%>
<%--            datatype: "json",--%>
<%--            success: function (data) {--%>
<%--                window.location.href="InforPerfectServlet?method=InfoFind"--%>
<%--            }--%>
<%--        });--%>
<%--    }--%>
<%--</script>--%>